<template>
  <div class="Mainbox">
      <!-- 收货地址 -->
    <heads v-show="!postadr" class="HeadTop1">
        <i @click="zhu1()"></i>
        <span>身份实名认证</span>
        <em>添加新身份</em>
    </heads>
    <!-- 收货地址1 -->
    <heads v-show="postadr" class="HeadTop1">
        <i @click="zhu2()"></i>
        <span>身份实名认证</span>
    </heads>
    <mains>
        <!-- 认证中 -->
    <div class="yesAccdit" v-show="!bol">
      <div class="yesAct1">
        <div class="yes1">
          <div class="y1 w">
            <span>身份信息</span>
            <span>请确保身份证信息真实有效，否则无法通过审核</span>
          </div>
          <div class="y1Name w">
            <input
              type="text"
              placeholder="您的姓名（请填写身份证上的真实姓名）"
            />
          </div>
          <div class="y1Tel w">
            <input type="text" placeholder="您的身份证号（将加密处理）" />
          </div>
        </div>
        <div class="yes2">
          <div class="y2 w">
            <span>身份证照片</span>
            <span>上传身份证正反面照片让通关更便捷</span>
          </div>
          <div class="y2Name">
              <div class="y2Img">
                  <div><i></i><span>请上传</span> </div>
                  <div><i></i><span>请上传</span></div>
              </div>
              <div class="y2ImgLi">
                  <div class="y2ImgLi-1">
                      <span><i>*</i>上传前请先查看样张</span>
                      <span><i></i>查看更多帮助内容</span>
                  </div>
                  <div class="y2ImgLi-2">
                    <div><img src="../../assets/user/acd1.jpg" alt="正面"></div>
                    <div><img src="../../assets/user/acd2.jpg" alt="反面"></div>
                  </div>
              </div>
            
          </div>
          <div class="actFoot">
              <div class="actFoot-top">
                为什么需要实名认证
              </div>
              <div class="actFoot-cont">
                  <ul>
                      <li class="w" v-for="item in action1" :key="item"><i class="mark"></i><span>{{item}}</span></li>
                  </ul>
              </div>
              

            
          </div>
        </div>
      </div>
      
    </div>


    <!-- 未认证 -->
    <div class="noAccdit" v-show="bol">
      <div class="noAc1 w">
        <div></div>
        <div>暂无身份证信息，请添加</div>
        <div>添加新身份证信息</div>
      </div>
    </div>
    <!-- 认证通过 -->
    <div class="tongAccdit" v-show="bol">
        <div>
            <template v-for="(item,index) in add1" >
                <div class="tong" :key="index">
                    <div class="tong-name w">
                        <span>{{item.name}}</span>
                        <span>{{item.add}}</span>
                        <em v-if="index==1">审核通过</em>
                    </div>
                    <div class="tong-img w">
                        <div>{{item.addimg1}}</div>
                        <div>{{item.addimg2}}</div>
                    </div>
                    <div class="w tong-serv">
                        <span class="mT2"><i></i>编辑</span>
                        <span class="mT3"><i></i>删除</span>
                    </div>
                </div>
            </template>

        </div>
    </div>

    </mains>
      <!-- 遮罩 -->
    <zhe v-show="bol">
        <div class="w-tan1">
            <div class="tan">
                <div>确认清除缓存？</div>
                <div>
                    <span class="btn1" @click="quxiao()">取消</span>
                    <span class="btn2" @click="qingkong()">确定</span>
                </div>
            </div>
        </div>
    </zhe>
    <!-- 提交按钮 -->
    <div class="actFoot-di">
        <button>提交</button>
    </div>
  </div>
</template>

<script>
import Head from './Head.vue';
import Main from './Main.vue';
import Ald from '../Ald.vue';
export default {
    name:'Address',
    data(){
        return{
            bol:false,
            postadr:false,
            arr:['请填写手机号','请选择城市','请填写详细地址','请填写邮编'],
            name:'',
            action1:['根据海关规定，购买跨境商品需要办理清关手续，需要您上传身份证信息用于商品入境申报真实的姓名和身份信息才能确保您的包裹顺利通过海关检查','声明：阿拉灯负责提交信息，并对您的身份信息保密，绝不传播或用于其他地方请放心填写。'],
            add1:[
                {
                    name:'李四',
                    add:'15013407080708',
                    addimg1:'身份证正面照片',
                    addimg2:'身份证反面照片',
                },{
                    name:'李四',
                    add:'15013407080708',
                    addimg1:'身份证正面照片',
                    addimg2:'身份证反面照片',
                }
            ]
        }
    },components:{
        'heads':Head,
        'mains':Main,
        'zhe':Ald,
    },methods:{
        postAdr(){
            this.postadr=!this.postadr;
            console.log(this.postadr);
        },zhu1(){
            this.$router.replace('/login');
        },zhu2(){
            this.postadr=!this.postadr;
        },insert(){
            console.log(this.name);
        },
        // 三级联动
        sld(){

        }
    }

}
</script>

<style scoped>
.w{
    width: calc(100% - 4rem );
    padding: 0 2rem ;
}
/* 底部 */
.actFoot{
    width: 100%;
}
.actFoot-top{
    background-color: #f9d3d4;
    color: #e53e42;
    font-size: 2.4rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
}
.actFoot-cont {
    width: 100%;
    color: #666;
    background-color: #fff;
    margin-bottom: 2rem;
    border-top: 0.1rem solid #f2f2f2;
}
.actFoot-cont ul li{
    list-style: disc;
    text-align: left;
    line-height: 3.6rem;
    position: relative;
    display: flex;
}
/* 小黑点 */
.mark{
    display: inline-block;
    height: 0.6rem;
    width: 0.6rem;
    border-radius: 50%;
    background-color:#666;
    margin-right: 1rem;
    margin-top: 1.8rem;
}
.actFoot-cont ul li span{
    font-size: 1.8rem;
    display: inline-block;
    width: calc(100% - 1.6rem);
    white-space: wrap;
    padding: 0.4rem 0;
}
/* 提交按钮 */
.actFoot-di{
    height: 9rem;
    line-height: 9rem;
    border-top: #ccc 0.1rem solid;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.actFoot-di button{
    height: 3.8rem;
    line-height: 3.8rem;
    background-color: #e53e42;
    width: 20.5rem;
    margin-top: 2rem;
    color: #fff;
    border-radius: 3.8rem;
}
/* 认证中 */
   .y2Name{
        width: calc(100% - 4rem);
        padding: 4rem 2rem 1.8rem;
        background-color: #fff;
        margin-bottom: 2rem;
    }
    .y2Img ,.y2ImgLi-2,.y2ImgLi-1{
        display: flex;
        justify-content: space-around;
        width: 100%;
      }
       .y2Img div{
        height: 20rem;
        width: calc(50% - 6rem);
        border: #808080 0.1rem solid;
        margin-bottom: 2.4rem;
        font-size: 2.4rem;
        color: #ccc;   
        display: flex;     
        flex-direction: column;                   
       }
       .y2Img div i{
           position: relative;
           left: calc(50% - 5.3rem);
           height: 7.6rem;
           width: 10.6rem;
           margin-top: 3.9rem;
       }
       .y2Img div i:nth-child(1){
           background: url(../../assets/user/acd1.png) no-repeat 0 0;
       }
       .y2Img div i:nth-child(2){
           background: url(../../assets/user/acd2.png) no-repeat 0 0;
       }
       .y2Img div span{
           height: 6.5rem;
           line-height: 6.6rem;
       }
       .y2ImgLi-1 span{
           flex: 1;
           height: 5.8rem;
           line-height: 5.8rem;
           font-size: 1.8rem;
       }
       .y2ImgLi-1 span:nth-child(1){
           color: #4c4c4c;
       }
       .y2ImgLi-1 span:nth-child(1) i{
           color: #e53e42;
       }
       .y2ImgLi-1 span:nth-child(2){
           color: #e53e42;
       }
       .y2ImgLi-1 span:nth-child(2) i{
           position: relative;
           top: 0.5rem;
           right: 0.4rem;
           display: inline-block;
           height: 2.4rem;
           width: 2.4rem;
           background: url(../../assets/user/user-deng3.png) no-repeat 0 0;
       }
       .y2ImgLi-2 div{
        height: 27.8rem;
        width: calc(50% - 12rem);
        border: #808080 0.1rem solid;
        overflow: hidden;
       }
       .y2ImgLi-2 div img{
           width: 100%;
       }




/* 认证通过 */
.tongAccdit{
    width: 100%;
}
.tong{
    width: 100%;
    margin-bottom: 2rem;
    background-color: #fff;
}
.tong-name{
    height: 6.7rem;
    line-height: 6.7rem;
    border-top: 0.1rem solid #ccc;

}
.tong-name span,.tong-name em{
    position: absolute;
    height: 100%;
}
.tong-name span:nth-child(1),.tong-name span:nth-child(2){
    margin-right: 9rem;
    font-size: 2.8rem ;
    color: #4c4c4c;
}
.tong-name span:nth-child(1){
    left: 2rem;
}
.tong-name span:nth-child(2){
    left: 16rem;
}
.tong-name em{
    right: 2rem;
    font-size: 3rem;
    color: #57b623;
}
/* img */
.tong-img{
    display: flex;
    padding: 1.5rem 2rem 3.8rem;
    border-bottom: 0.1rem solid #4c4c4c;
    font-size: 1.8rem;
    color: #4c4c4c;
    background-color: #fff;
    }
.tong-img div{
    height: 12rem;
    line-height: 12rem;
    border: 0.1rem solid #4c4c4c;
    width: 19.8rem;
}
.tong-img div:nth-child(1){
    margin-right: 2rem;
}
/*  */
.tong-serv{
    position: relative;
    height: 8rem;
    line-height: 8rem;
    font-size: 2.4rem;
    color: #4c4c4c;
    background-color: #fff;
    text-align: right;

}
.tong-serv span{
    position: relative;
}
.tong-serv span:nth-child(2){
    margin-left: 8rem;
}
.tong-serv span i{
    position: absolute;
    top: calc(50% - 1.5rem);
    height: 3rem;
    width: 3rem;
}
.tong-serv .mT2{
    right: 2rem;
}
 .tong-serv .mT2 i{
    right: 6rem;
    background: url(../../assets/user/ed.png) no-repeat 0 0;
}
.tong-serv .mT3 i{
    right: 6rem;
    background: url(../../assets/user/de.png) no-repeat 0 0;
}
/* 未认证 */
      .noAccdit {
        width: 100%;
        display: none;
      }
      .noAc1 div:nth-child(1) {
        height: 32rem;
        width: 32rem;
        background-color: #fee3e3;
        margin: 7.8rem auto 0;
      }
      .noAc1 div:nth-child(2) {
        width: 1005;
        height: 7rem;
        line-height: 7rem;
        font-size: 2.4rem;
        color: #808080;
        text-align: center;
      }
      .noAc1 div:nth-child(3) {
        height: 5.6rem;
        width: 29.6rem;
        font-size: 3rem;
        color: #4c4c4c;
        border: 0.2rem solid #4c4c4c;
        margin: 0 auto;
        line-height: 5.6rem;
        text-align: center;
        border-radius: 5.6rem;
      }
      /* 认证中 */
      /* 未认证 */
      .yesAccdit {
        width: 100%;
      }
      .yesAct1 .yes1 div.y1,
      .yesAct1 .yes2 div.y2 {
        line-height: 6rem;
        height: 6rem;
        text-align: left;
        position: relative;
        display: flex;
      }
      .yesAct1 .yes1 .y1 span:nth-child(1), .yesAct1 .yes2 .y2 span:nth-child(1) {
        font-size: 2.4rem;
        color: #4c4c4c;
        margin-right: 2rem;
      }
      .yesAct1 .yes1 .y1 span:nth-child(2),.yesAct1 .yes2 .y2 span:nth-child(2) {
        font-size: 1.8rem;
        color: #e53e42;
      }
      .y1Name {
        height: 8rem;
        border-bottom: 0.1rem solid #ccc;
        background-color: #fff;
      }
      .y1Name input {
        width: 100%;
        height: 100%;
        color: #ccc;
        font-size: 3rem;
      }
      .y1Tel {
        height: 8rem;
        /* width: 100%; */
        background-color: #fff;
      }
      .y1Tel input {
        width: 100%;
        height: 100%;
        color: #ccc;
        font-size: 3rem;
      }
      
/* 公用 */
.Mainbox{
    font-size: 0;
}
.HeadTop1 i:nth-child(1){
    height: 3.8rem;
    width: 3.8rem;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-1.9rem);
    background: url(../../assets/user/user-wback.png) no-repeat 0 0;
}
.HeadTop1 em{
    height: 9.6rem;
    line-height: 9.6rem;
    position: absolute;
    right: 2rem;
    top: 0;
    font-size: 3rem;
}

</style>